<template>
  <div>
    <FormPanel
      :list="formList"
      formType="add"
      labelWidth="100"
      :isSubmitBtn="true"
      @formChange="formChangeHandle"
    />
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => this.columns = columns"
      :onRowSelectChange="selectChange"
    ></FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">取 消</el-button>
      <el-button @click="closeDrawer(2)" type="primary">确定</el-button>
    </div>
  </div>
</template>
<script>
import { getRolelist } from '@/api/common/auth/positionAuth/index';
export default {
  name: 'zjRoleTemplate',
  data() {
    this.BaseTable = null;
    return {
      formList: this.createFrom(),
      fetchApi: getRolelist, //调用接口
      fetchParams: {
        limit: 5,
        pageNum: 1,
        roleCode: '',
        roleName: ''
      }, //调用数据
      columns: this.createTablelist(),
      selectedRows: []
    };
  },
  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '角色代码',
          fieldName: 'roleCode',
          placeholder: '角色代码...'
        },
        {
          type: 'INPUT',
          label: '角色名称',
          fieldName: 'roleName',
          placeholder: '角色名称...'
        }
      ];
    },
    formChangeHandle(data) {
      console.log(data);
      this.fetchParams = Object.assign({}, data);
    },
    closeDrawer(type) {
      console.log(this.selectedRows);
      if (type == 1) {
        this.$emit('close', true);
      } else {
        if (!this.selectedRows.length) {
          return this.closeDrawer(1);
        }
        if (this.selectedRows.some(x => Number(x.COUNT) <= 0)) {
          return this.$notify({
            title: '提示信息',
            message: '数量不能为空，且必须大于 0',
            type: 'error'
          });
        }
        this.$emit('change', this.selectedRows);
      }
    },
    createTablelist() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '角色代码',
          dataIndex: 'roleCode',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.roleCode}</span>;
          }
        },
        {
          title: '角色名称',
          dataIndex: 'roleName',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.roleName}</span>;
          }
        }
      ];
    },
    // 选中
    selectChange(rows) {
      this.selectedRows = rows;
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
};
</script>

